<template>
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
            <h3 class="box-title">提交备案</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="form-group">
              <div class="col-sm-12 p-r-0">
                <div class="row col-sm-6 flex">
                  <label for="" class="control-label min-width text-right"><sub class="text-red">*</sub>日期范围</label>
                  <div class="inline-block">
                    <el-date-picker class="pull-left linehe" style="width: 46%;height: 36px;line-height: 34px"
                                    type="datetime" placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime" v-model="addForm.starTime">
                    </el-date-picker>
                    <span class="pull-left " style="line-height: 36px;padding: 0 1%">至</span>
                    <el-date-picker class="pull-left linehe" style="width: 46%" type="datetime" placeholder="结束时间"
                                    format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="addForm.endTime" @change="getETime">
                    </el-date-picker>
                  </div>
                </div>
                <div class="pull-left">
                  <button class="btn bg-green min-width" @click="getrecordList" v-if="$_has('sys:record:search')">筛选订单</button>
                </div>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
    </div>
    <div class="row form-group">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
            <h3 class="box-title">订单列表</h3>
            <button class="btn btn-primary min-width pull-right" @click="submitRecord" v-if="$_has('sys:record:record')">申请备案</button>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row m-b-10">
              <div class="col-sm-12 flex">
                <label class="control-label min-width">订单编号</label>
                <div class="inline-block">
                  <input type="text" class="form-control pull-left" style="width: 350px" v-model="orderNum" placeholder="请输入订单编号">
                  <button class="btn btn-success pull-left m-lr-10" @click="searchOrderNum">查询</button>
                </div>
              </div>
            </div>
            <table class="table table-bordered table-responsive">
              <div class="overlay" v-if="show">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <thead>
              <tr>
                <th>订单日期</th>
                <th>订单编号</th>
                <!--<th>订单金额（USD）</th>-->
                <th>报关单号</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="customsDeclarationList.length == 0">
                <td colspan="6">
                  没有数据
                </td>
              </tr>
              <tr v-else v-for="(customsDeclarationListItem,index) in customsDeclarationList" :class="{'showActive':showActive}">
                <td>{{customsDeclarationListItem.orderCreated}}</td>
                <td>{{customsDeclarationListItem.orderId}}</td>
                <td>{{customsDeclarationListItem.declareNo}}</td>
                <td>
                  <a class="text-red"  @click="deleteCustom(customsDeclarationListItem.orderId,customsDeclarationListItem.total)">删除</a>
                </td>
              </tr>
              </tbody>
            </table>
            <!--<template class="clearfix" v-if="customsDeclarationList.length != 0">-->
              <!--<div class="pull-right">-->
                <!--<pagination :total="pages.total" :current-page='pages.current'-->
                            <!--:display="pages.display" @pagechange="pagechange"></pagination>-->
              <!--</div>-->
            <!--</template>-->
          </div>
          <div class="clear-fix" style="padding-bottom: 20px;">
            <el-pagination
              style="float: right; margin-top: 20px;"
              background
              layout="total, prev, pager, next"
              @current-change="pagechange"

              :current-page="pages.current"
              :total="pages.total">
            </el-pagination>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
    </div>
    <div class="modal fade" id="modal-default">
      <div class="modal-dialog maxwModal">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">报关单模板下载</h4>
          </div>
          <div class="modal-body">
            <div class="box-body">
              <div class="minh">
                <div class="flex">
                  <label class="min-width control-label">模板下载：</label>
                  <div class="inline-block"><a href="">asdfa</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <transition name="fade">
      <div v-if="errorShow" class="gritter-notice-wrapper " :class="{'success-notice-wrapper':errorClass}">
        <div id="gritter-item-4" class="gritter-item-wrapper gritter-error" style="" role="alert">
          <div class="gritter-item"><a class="gritter-close" tabindex="1" @click="closeError"><i
            class="fa fa-close"></i></a>
            <div class="gritter-without-image"><span class="gritter-title">{{errorTitle}}</span>
              <p>{{errorMsg}}</p></div>
          </div>
        </div>
      </div>
    </transition>
  </section>
</template>

<script>
  import pagination from '@/components/common/pageComponent'
  import instance from '@/api/index.js'
  export default {
    name: "submittRecord",
    data(){
      return{
        show:false,//loading
        pages:{
          current:1,//当前页
          display:10,//每页显示多少条数据
          total:0,//总条数
        },
        allList:[],
        customsDeclarationList:[],//获取报关单列表
        addForm:{},//开始日期结束日期
        errorShow: false,//错误显示
        errorMsg: '',//错误信息
        errorTitle: '',//错误提示标题
        errorClass: false,//错误样式
        orderNum:'',//订单编号
        recordPamas:{},
        customsDeclaraArr:[],//分页数组
        showActive:false,//查询第一条添加样式
        orderNum:'',//订单号查询
        skipOrderIds:[],//过滤订单
      }
    },
    methods: {
      // 获取分页
      pagechange: function (currentPage) {
        this.pages.current = currentPage;
        if (this.orderNum && currentPage == 1) {
          this.showActive = true;
        }else {
          this.showActive = false;
        }
        this.customsDeclarationList = this.customsDeclaraArr.slice((currentPage - 1) * 10, currentPage * 10);
      },
      //添加样式
      chooseStatus: function (index) {
        this.activeIndex = index;
      },
      //获取备案列表数据
      getrecordList:function(){
        let vm = this;
        if(this.addForm.starTime && this.addForm.endTime){
          var starTime = new Date(this.addForm.starTime.replace("-", "/").replace("-", "/"));
          var endTime = new Date(this.addForm.endTime.replace("-", "/").replace("-", "/"));
          if(starTime > endTime){
            // vm.errorClass = false;
            // vm.errorShow = true;
            // vm.errorTitle = "日期范围错误";
            // vm.errorMsg = "开始日期大于结束日期！";
            // vm.setTime();
            vm.$message.error('开始日期大于结束日期');
            return;
          }
        }else {
          // vm.errorClass = false;
          // vm.errorShow = true;
          // vm.errorTitle = "日期错误";
          // vm.errorMsg = "请选择日期！";
          // vm.setTime();
          vm.$message.error('请选择日期');
          return
        }
        vm.recordPamas.begin = this.addForm.starTime;
        vm.recordPamas.end = this.addForm.endTime;
        vm.recordPamas.page = 1;
        vm.customsDeclaraArr = [];
        instance({
          method:'post',
          url:'/v1/declare/search',
          data:vm.recordPamas
        }).then(function (data) {
          console.log(data)
          if(data.data.success){
            // vm.customsDeclarationList = data.data.data.;

            vm.customsDeclaraArr = data.data.data.list;
            if(vm.customsDeclaraArr.length != 0){
              vm.customsDeclarationList = vm.customsDeclaraArr.slice(0, 10);
            }
            vm.pages.total = vm.customsDeclaraArr.length;
          }
        })
      },

      //定时信息提示
      setTime: function () {
        let vm = this;
        setTimeout(function () {
          vm.errorShow = false;
        }, 2500)
      },

      //关闭信息提示
      closeError: function () {
        this.errorShow = false;
      },

      //搜索
      searchOrderNum:function(){
        let vm = this;
        if (this.orderNum) {
          this.showActive = true;
        }else {
          this.showActive = false;
        }
        for (let j = 0; j < vm.customsDeclaraArr.length; j++){
          if(vm.customsDeclaraArr[j].orderId == this.orderNum){
            let first = vm.customsDeclaraArr[0];
            vm.customsDeclaraArr[0] = vm.customsDeclaraArr[j];
            vm.customsDeclaraArr[j] = first;
          }
        }
        vm.customsDeclarationList = vm.customsDeclaraArr.slice(0, 10);
        console.log(vm.customsDeclaraArr)
      },

      //提交申请备案
      submitRecord:function(){
        let vm = this;
        if(this.addForm.starTime && this.addForm.endTime){
          var starTime = new Date(this.addForm.starTime.replace("-", "/").replace("-", "/"));
          var endTime = new Date(this.addForm.endTime.replace("-", "/").replace("-", "/"));
          if(starTime > endTime){
            // vm.errorClass = false;
            // vm.errorShow = true;
            // vm.errorTitle = "日期范围错误";
            // vm.errorMsg = "开始日期大于结束日期！";
            // vm.setTime();
            vm.$message.error('请筛选订单！');
            return;
          }
        }else {
          // vm.errorClass = false;
          // vm.errorShow = true;
          // vm.errorTitle = "日期错误";
          // vm.errorMsg = "请选择日期！";
          // vm.setTime();
          vm.$message.error('请筛选订单！');
          return
        }
        let _ids = [];
        // for (let i = 0; i < vm.customsDeclaraArr.length; i++){
        //   _ids.push(vm.customsDeclaraArr[i].orderId)
        // }
        _ids = this.skipOrderIds;
        if(vm.customsDeclaraArr.length != 0){
          instance({
            method:'post',
            hideLoading: true,
            url:'/v1/declare/record',
            data:{
              begin:this.addForm.starTime,
              end:this.addForm.endTime,
              skipOrderIds:_ids,
            }
          }).then(function (data) {
            vm.$message({
              message: "操作成功！",
              type: 'success'
            });
          }).catch(err=>{
            let msg = typeof err === "string" ? err: "系统错误，请联系管理员";
            this.$message({
              message: err
            });
            console.log("err:", err);
            this.$confirm("数据校验有问题:" + msg, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            }).then(() => {
             this.$router.push('/v1/declare/record/list');
            }).catch(() => {
              this.$router.push('/v1/declare/record/list');
            });
          })
        }else {
          vm.$message.error('没有备案申请数据！，请重新筛选订单！')
        }
      },

      //删除
      deleteCustom:function (_id,_total) {
        for (let i = 0; i < this.customsDeclaraArr.length; i++){
          if(this.customsDeclaraArr[i].orderId == _id){
            this.skipOrderIds.push(this.customsDeclaraArr[i].orderId);
            this.customsDeclaraArr.splice(i,1);
          }
        }
        this.showActive = false;
        this.totalPrice =this.totalPrice - parseInt(_total);
        this.customsDeclarationList = this.customsDeclaraArr.slice((this.pages.current - 1) * 10, this.pages.current * 10);
        this.pages.total = this.customsDeclaraArr.length;
      },


      getSTime: function (val) {
        this.addForm.starTime = val;
      },
      getETime: function (val) {
        this.addForm.endTime = val;
      },


      //筛选订单
      screeningOrder: function () {
        this.star = $("#datepickerstar").val();
        this.end = $("#datepickerend").val();
        console.log(this.star, this.end)
      },

      //测试
      // addList: function () {
      //   for (let i = 0; i < 100; i++) {
      //     let obj = {};
      //     obj.data = i + 1;
      //     obj.orderNum = i + 2;
      //     obj.customsNum = i + 3;
      //     this.allList.push(obj)
      //   }
      //   this.customsDeclarationList = this.allList.slice(0, 10);
      //   this.pages.total = 100;
      // },
      // export2Excel() {
      //   require.ensure([], () => {
      //     const { export_json_to_excel } = require('@/vendor/Export2Excel');
      //     const tHeader = ['订单日期', '订单编号', '报关单号'];
      //     const filterVal = ['data', 'orderNum', 'customsNum'];
      //     const list = this.allList;
      //     const data = this.formatJson(filterVal, list);
      //     export_json_to_excel(tHeader, data, '列表excel');
      //   })
      // },
      // formatJson(filterVal, jsonData) {
      //   return jsonData.map(v => filterVal.map(j => v[j]))
      // }
    },
    created(){
      // this.addList();
      window.v = this;
    },
    components: {
      pagination
    }
  }
</script>

<style scoped>

</style>
